// import React from 'react'; // 仅限于函数组件
import ReactDOM from 'react-dom';
// 在react中  把html结构当作一种数据类型
//  在 html 当中， 想要使用变量  就用 {变量或者表达式}
// 行内样式编写的时候  style={样式对象}
// 类名 不能写class 需要写成className
// for  写成htmlFor
// 一般使用三元运算符 结构加载判断
// 列表循环   创造一个结构数组即可 [<i></i>,<i></i>,<i></i>] 一般使用map
// 不能把普通对象直接的放入结构当中

let username = "珠峰培训"
let sty = { color: 'red', background: 'blue' }
let ary = [111, 222, 333, 444, 555]
let obj = { name: "qqqq", age: 123 }
let elstr = '<i>核力量</i>'

function judge(age) {
  if (age > 10) {
    return <>
      <h1>查过了10岁了</h1>
      <h1>查过了10岁了</h1>
      <h1>查过了10岁了</h1>
      <h1>查过了10岁了</h1>
      <h1>查过了10岁了</h1>
      <h1>查过了10岁了</h1>
    </>
  } else {
    return <>
      <h2>没有超过10岁</h2>
    </>
  }
}
function getLi(ary) {
  let temp = [];
  for (let i = 0; i < ary.length; i++) {
    temp.push(<li key={i}>{ary[i]}</li>)
  }
  return temp;
}

function App() {
  let age = 12;
  let res = username + age;
  let str = <h1 className={'box ' + (1 > 2 ? username : 'hello')} qqq={age} style={sty}>hello world {res}</h1>
  return <>
    {str}
    <input type="checkbox" id="qqq" /><label htmlFor='qqq'>qqq</label>、
    {judge(age)}
    {JSON.stringify(obj)}

    <ul>
      {
        // [<li>111</li>, <li>222</li>, <li>333</li>, <li>444</li>, <li>555</li>]
        ary.map(item => {
          return <li key={item}>{item}</li>
        })
      }
      {
        getLi(ary)
      }
    </ul>
    <p dangerouslySetInnerHTML={{ __html: elstr }}></p>
    <p>{elstr}</p>
  </>
}
ReactDOM.render(
  // <React.StrictMode>
  <App />,
  // </React.StrictMode>,
  document.getElementById('root')
);